<template>
  <div class="general-budget">
    <a-descriptions class="line" :title="$t('all.autotext55')" v-if="from!=='high'"></a-descriptions>
    <div class="general-budget__content">
      <div class="budget-item" v-for="item in budgeItems" :key="item.id">
        <div class="item-top">
          <span class="label">{{ item.allName }}</span>
          <span class="sub-title">{{ item.subTitle }}</span>
        </div>
        <div class="item-middle">
          <span>¥ <em>{{ item.allNum }}</em></span>
        </div>
        <div class="item-bottom">
          <p>
            <span class="label">{{ item.studyName }}：</span>
            <span>¥ <em>{{ item.studyNum }}</em></span>
          </p>
          <p v-if="hasServiceFee">
            <span class="label">{{ item.serviceName }}：</span>
            <span>¥ <em>{{ item.serviceNum }}</em></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPaymentList } from '@/api/project/finance'
import { mapGetters } from 'vuex'

export default {
  name: 'general-budget',
  props: ['from'],
  data () {
    return {
      budgetQueryParams: {
        proId: ''
      },
      budgeItems: [
        {
          allName: this.$t('all.autotext151'),
          allNum: '0.00',
          studyName: this.$t('all.autotext1226'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext449'),
          serviceNum: '0.00'
          // subTitle: '预算明细'
        },
        {
          allName: this.$t('all.autotext343'),
          allNum: '0.00',
          studyName: this.$t('all.autotext1406'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext672'),
          serviceNum: '0.00'
          // subTitle: '支出明细'
        },
        {
          allName: this.$t('all.autotext471'),
          allNum: '0.00',
          studyName: this.$t('all.autotext849'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext139'),
          serviceNum: '0.00'
        }
      ]
    }
  },
  computed: {
    ...mapGetters({
      project: 'project'
    }),
    hasServiceFee () {
      return (this.project && this.project.serviceCharge !== null && this.project.serviceCharge !== undefined) ||
        (this.project && this.project.serviceChargePercent !== null && this.project.serviceChargePercent !== undefined)
    }
  },
  created () {
    this.getProId()
    this.getGeneralBudget()
  },
  methods: {
    getProId () {
      const pd = localStorage.getItem('CURRENT_PROID')
      if (pd) {
        this.budgetQueryParams.proId = parseInt(pd)
      }
    },
    getGeneralBudget () {
      return getPaymentList(this.budgetQueryParams).then(res => {
        this.setTotalBudget(res)
        this.setTotalPay(res)
        this.setTotalSurplus(res)
        this.setTotalFallOff(res)
      })
    },
    setTotalBudget (data) {
      const { budget, studyBudgetAmount, serverBudgetAmount } = data
      const totalBudget = this.budgeItems[0]
      this.assignAmountValue(totalBudget, [budget, studyBudgetAmount, serverBudgetAmount])
    },
    setTotalPay (data) {
      const { paid, studyPaidAmount, serverPaidAmount } = data
      const totalPay = this.budgeItems[1]
      this.assignAmountValue(totalPay, [paid, studyPaidAmount, serverPaidAmount])
    },
    setTotalSurplus (data) {
      const { budget, studyBudgetAmount, serverBudgetAmount, paid, studyPaidAmount, serverPaidAmount } = data
      const totalSurplus = this.budgeItems[2]
      this.assignAmountValue(totalSurplus, [
        (budget - paid),
        (studyBudgetAmount - studyPaidAmount),
        (serverBudgetAmount - serverPaidAmount)
      ])
    },
    setTotalFallOff (data) {
      const { breakAwayFromPrice, serverBreakAwayFromPrice } = data
      const totalFallOff = this.budgeItems[3]
      this.assignAmountValue(totalFallOff, [
        (breakAwayFromPrice + serverBreakAwayFromPrice),
        breakAwayFromPrice,
        serverBreakAwayFromPrice
      ])
    },
    assignAmountValue (budget, amount) {
      if (budget) {
        budget.allNum = (+amount[0]).toFixed(2)
        budget.studyNum = (+amount[1]).toFixed(2)
        budget.serviceNum = (+amount[2]).toFixed(2)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.general-budget {
  .general-budget__content {
    background-color: #F6F9FB;
    display: flex;
    .budget-item {
      position: relative;
      padding: 20px 16px;
      width: 33.3%;
      text-align: center;
      .label {
        font-size: 16px;
        color: #4D5C6F;
      }
      .sub-title {
        font-size: 16px;
        color: #1890FF;
      }
      &:not(:last-of-type):after {
        display: inline-block;
        content: ' ';
        width: 1px;
        height: 80%;
        background-color: #CCD4E1;
        position: absolute;
        right: 0;
        top: 10%;
      }
      .item-top {
        // display: flex;
        // justify-content: space-between;
      }
      .item-middle {
        margin-bottom: 40px;
        color: #0F121B;
        em {
          font-style: normal;
          font-size: 24px;
        }
      }
      .item-bottom {
        em {
          font-style: normal;
          font-size: 16px;
          color: #0F121B;
        }
      }
    }
  }

}
</style>
